<template>
  <div class="print-table">
    <div class="print-table-header">
      <div class="cell bb dy-fontSize" style="width: 30px;">序号</div>
      <div v-for="(column, index) in columnList" :key="index" class="cell bb bl dy-fontSize flex-index">
        {{ column.title }}
      </div>
    </div>
    <div class="print-table-content">
      <template v-if="tableData.length">
        <div v-for="(row, jindex) in tableData" :key="jindex" class="print-table-row">
          <div class="cell bb dy-fontSize" style="width: 30px;text-align:center;">{{ jindex+1 }}</div>
          <div v-for="(column, index) in columnList" :key="index" class="cell bb bl dy-fontSize flex-index">
            {{ getPrintData(row, column) }}
          </div>
        </div>
      </template>
      <div v-else class="subTitle dy-fontSize bb">无数据</div>
    </div>
    <template v-if="config && config.foot && Array.isArray(config.foot) && config.foot.length">
      <el-row v-for="(item, index) in config.foot" :key="index" type="flex" class="bb">
        <el-col :span="4" class="response-item br dy-fontSize">{{ item.title }}</el-col>
        <el-col v-if="item.mathKeyword" :span="8" class="response-item dy-fontSize">{{ getSum(tableData, item) }}</el-col>
        <el-col v-else :span="8" class="response-item dy-fontSize">{{ getPrintData(printData, item) }}</el-col>
      </el-row>
    </template>
    <el-row v-else-if="config && config.foot" type="flex" class="bb">
      <el-col :span="4" class="response-item br dy-fontSize">{{ config.foot.title }}</el-col>
      <el-col v-if="config.foot.mathKeyword" :span="8" class="response-item dy-fontSize">{{ getSum(tableData, config.foot) }}</el-col>
      <el-col v-else :span="8" class="response-item dy-fontSize">{{ getPrintData(printData, config.foot) }}</el-col>
    </el-row>
  </div>
</template>

<script>
// mixins
import extendData from './mixins/extendData';
import { moneyFilter } from '@/filters/number';
import math from '@/utils/math';
import { isNumber } from '@/utils/tools';

export default {
  mixins: [extendData],
  props: {
    config: {
      type: Object,
      default: () => {
        return null;
      }
    },
    printData: {
      type: Object,
      default: () => {
        return null;
      }
    }
  },
  computed: {
    tableData() {
      if (!this.printData || !this.config) return [];
      let ans = this.config.keyword ? this.printData[this.config.keyword] || [] : this.printData;
      if (this.config.type === 'tableSingle' && !Array.isArray(ans)) {
        ans = [ans];
      }
      return ans;
    },
    columnList() {
      return this.config.children || [];
    }
  },
  methods: {
    getSum(tableData, config) {
      if (!Array.isArray(tableData) || !tableData || !tableData.length) {
        return '--';
      }
      let sum = null;
      tableData.forEach(i => {
        if ((i[config.mathKeyword] || i[config.mathKeyword] === 0) && isNumber(i[config.mathKeyword])) {
          sum = sum === null ? Number(i[config.mathKeyword]) : math.add(sum, Number(i[config.mathKeyword]));
        }
      });
      if (sum || sum === 0) sum = sum.toFixed(2);
      return sum !== null ? moneyFilter(config.unit === '分' ? sum / 100 : sum, true, '', true) : '--';
    }
  }
};
</script>
